<template>
      <div class="baseList">

        <div class="newBox">
            <button class="bt wt-120" @click="handleBulid()">
                新增护理项目
            </button>
        </div>

        <div class="tableBoxs">
  
          <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
          <t-table row-key="index" 
          :data="data" :columns="COLUMNS" 
          :stripe="stripe" :bordered="bordered" :hover="hover"
            :table-layout="tableLayout ? 'auto' : 'fixed'" :size="size" :show-header="showHeader" cell-empty-content="-"
            resizable lazy-load>
  
            <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
            <!--#image变量 代表 row  一行数据 -->
            <template #image="{ row }">
              <div>
                <div class="tdesign-demo-image-viewer__base">
                  <!-- image-viewer预览框 -->
                  <t-image-viewer :images="[row.image]">
                    <template #trigger="{ open }">
                      <div class="tdesign-demo-image-viewer__ui-image">
                        <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                        <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                          <span>
                            <BrowseIcon size="1.4em" /> 预览
                          </span>
                        </div>
                      </div>
                    </template>
                  </t-image-viewer>
                </div>
              </div>
            </template>
  
  
            <template #price="{ row }">{{ isDecimals(row.price) ? row.price : row.price + '.00' }}</template>
  
            <template #op="{ row }">
  
              <t-space direction="vertical">
                <t-space>
                  <t-link theme="danger" hover="underline"> 删除 </t-link>
                  <t-link theme="success" hover="underline"  @click="handleEdit(row)"> 编辑 </t-link>
                  <t-link theme="danger" hover="underline"> 禁用 </t-link>
  
                </t-space>
  
              </t-space>
            </template>
          </t-table>
        </div>
        <t-pagination
        v-model="pagination.pageNum"
        v-model:pageSize="pagination.pageSize"
        :total="pagination.total"
        @change="onPageChange"
      />
      </div>

  </template>
  
  <script lang="tsx" setup>
  import { ref } from 'vue';
  import { TableProps,PaginationProps } from 'tdesign-vue-next';

  import { COLUMNS } from '../constants';
  import { number } from 'echarts';
  
//  是父传过来的，子直接用
const props = defineProps({
    data: {
        type: Object,
        default: () => {
            return {}
        }
    },
    // 总条数
    total: {
        type: Number,
        default: 0
    },
    pagination: {
        type: Object,
        default: () => {
            return {}
        }
    }
})



  // 表格的样式
  const stripe = ref(true);
  const bordered = ref(true);
  const hover = ref(false);
  const tableLayout = ref(false);
  const size = ref<TableProps['size']>('medium');
  const showHeader = ref(true);
  
  

  
  
  // 小数判断
  // 写一个小数判断方法，如果是小数返回true 否则返回false
  const isDecimals = (num: number): boolean => {
  
    let count = 3;
    console.log("判断是否是小数：", Number(count) % 1 !== 0)
  
  
    return Number(num) % 1 !== 0;
  }
  


// 子组件需要调用父组件的方法
//声明方法
const emit = defineEmits([
    'onPageChange','handleBulid','handleEdit'
])

//点击翻页
const onPageChange = (val) => {
    emit('onPageChange', val)
}

//点击显示新增对话框
const handleBulid = () => {
    emit('handleBulid')
}
//点击显示修改对话框
const handleEdit = (val) => {
    emit('handleEdit', val)
}
  
  </script>
  